<!--
 * @author liganghao
 -->
<template>
  <div id="orgTree">
    <div class="search-tree-wrap">
      <el-input
        v-model.trim="treeName"
        style="width:100%;margin-right:20px"
        placeholder="组织名称搜索"
        class="search-input"
        clearable
        @clear="clearSearchTree"
      />
      <el-button class="filter-item tree-filter" type="primary" @click="handleFilterTree">搜索</el-button>
    </div>
    <el-tree
      v-if="!issearchtree"
      ref="addtree"
      key="lodTree"
      v-loading="menuLoading"
      :data="treeData"
      :default-expanded-keys="['1']"
      :props="defaultProps"
      :default-checked-keys="checkedData"
      :expand-on-click-node="false"
      :check-strictly="true"
      show-checkbox
      highlight-current
      node-key="id"
      :load="loadtree"
      lazy
      @check="treeCheckChange"
    >
      <span slot-scope="{ node }" class="custom-tree-node">
        <span>{{ node.label }}</span>
        <!--        <span
          :class="['tag', data.type==='JGLX01'?'gh':data.type==='JGLX02'?'qy':data.type===''?'bm':'']"
        >{{ data.typeValue || '' }}</span>-->
      </span>
    </el-tree>
    <el-tree
      v-if="issearchtree"
      ref="addtree"
      key="newTree"
      v-loading="menuLoading"
      :data="treeData"
      :props="defaultProps"
      :default-checked-keys="checkedData"
      :expand-on-click-node="false"
      default-expand-all
      node-key="id"
      :check-strictly="true"
      show-checkbox
      highlight-current
      @check="treeCheckChange"
    >
      <span slot-scope="{ node }" class="custom-tree-node">
        <span>{{ node.label }}</span>
        <!--        <span
          :class="['tag', data.type==='JGLX01'?'gh':data.type==='JGLX02'?'qy':data.type===''?'bm':'']"
        >{{ data.typeValue || '' }}</span>-->
      </span>
    </el-tree>
  </div>
</template>
<script>
import { getComAndOrgTree, roleListByName } from '@/views/person/api/index'

export default {
  name: 'Powertree',
  props: {},
  data() {
    return {
      menuLoading: false,
      issearchtree: false,
      dialogStatus: '',
      treeName: '',
      treeData: [], // 组织树
      checkedData: [], // 组织树选定
      selectData: [],
      orgId: '',
      defaultProps: {
        children: 'list',
        label: 'name'
      }
    }
  },
  watch: {

  },
  created() {
    this.getTreeData()
  },
  methods: {
    /**
     * 清空搜索企业
     */
    clearSearchTree() {
      this.treeName = ''
      this.issearchtree = false
      this.getTreeData()
      this.$nextTick(() => {
        this.echo()
      })
    },
    /**
     * 按企业名称查询
     */
    handleFilterTree() {
      if (this.treeName === '') {
        this.issearchtree = false
        this.getTreeData()
      } else {
        this.menuLoading = true
        return new Promise((resolve, reject) => {
          roleListByName({ name: this.treeName }).then(response => {
            this.treeData = response.data.data
            this.issearchtree = true
            this.menuLoading = false
            this.$nextTick(() => {
              this.echo()
            })
          }).catch(error => {
            reject(error)
            this.issearchtree = false
            this.menuLoading = false
          })
        })
      }
    },

    /**
     * 获取组织树
     */
    getTreeData() {
      this.menuLoading = true
      return new Promise((resolve, reject) => {
        getComAndOrgTree().then(response => {
          this.menuLoading = false
          this.treeData = response.data.data
        }).catch(error => {
          this.menuLoading = false
          reject(error)
        })
      })
    },
    loadtree(node, resolve) {
      this.menuLoading = true
      if (node.data.canLookDown === 1) {
        this.$message({
          message: '您没有查看下级企业的数据权限，请联系上级管理员开放权限！',
          type: 'error'
        })
        return
      }
      if (node.level !== 0) {
        getComAndOrgTree({ parentId: node.data.orgId, deptPId: node.data.deptId }).then(res => {
          this.menuLoading = false
          resolve(res.data.data)
        }).catch(res => {
          this.menuLoading = false
          resolve([])
        })
      }
    },

    /*
    * 回显
    * */
    echo() {
      this.$refs.addtree.setCheckedKeys([this.selectData])
    },
    /**
     * 组织树选择
     */
    treeCheckChange(data, node) {
      this.$nextTick(() => {
        this.$refs.addtree.setCheckedKeys([])
        this.$refs.addtree.setChecked(data, true)
        this.$emit('selectOrgTree', data)
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
#orgTree {
  height: 433px;
  overflow-x: auto;
  .search-tree-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tree-filter {
      padding: 10px 18px;
    }
    .el-button {
      padding: 10px;
    }
  }
  .tag {
    font-size: 12px;
    border-radius: 4px;
    padding: 2px 4px;
    color: #fff;
    &.gh {
      color: #ff7474;
      border: 1px solid #ff7474;
    }
    &.qy {
      color: #2fbcfb;
      border: 1px solid #2fbcfb;
    }
    &.bm {
      color: #ffa11c;
      border: 1px solid #ffa11c;
    }
  }
  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-icon-caret-right:before {
    content: "\E7A0";
    font-size: 14px;
  }
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: "\E7A2";
    font-size: 14px;
  }
}
</style>

